<div class="{{getBaseCssClasses 'header'}}">
    <a id="ks-date-picker-year-panel-previous-decade-btn-{{id}}"
       class="{{getBaseCssClasses 'prev-decade-btn'}}"
       href="#"
       role="button"
       title="{{previousDecadeLabel}}"
       hidefocus="on">
    </a>

    <a class="{{getBaseCssClasses 'decade-select'}}"
       role="button"
       href="#"
       hidefocus="on"
       title="{{decadeSelectLabel}}"
       id="ks-date-picker-year-panel-decade-select-{{id}}">
            <span id="ks-date-picker-year-panel-decade-select-content-{{id}}">
                {{startYear}}-{{endYear}}
            </span>
        <span class="{{getBaseCssClasses 'decade-select-arrow'}}">x</span>
    </a>

    <a id="ks-date-picker-year-panel-next-decade-btn-{{id}}"
       class="{{getBaseCssClasses 'next-decade-btn'}}"
       href="#"
       role="button"
       title="{{nextDecadeLabel}}"
       hidefocus="on">
    </a>
</div>
<div class="{{getBaseCssClasses 'body'}}">
    <table class="{{getBaseCssClasses 'table'}}" cellspacing="0" role="grid">
        <tbody id="ks-date-picker-year-panel-tbody-{{id}}">
        {{{include "date/picker/year-panel/years-xtpl"}}}
        </tbody>
    </table>
</div>